<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>订单的其他面板</title>
</head>
<body>
<!-- 有订单的情况 -->
<div th:fragment="orderList">
    <!--    保存类型-->
    <input type="hidden" th:value="${type}" id="query-type">
    <style>
        .lightBlue{
            background-color: #FAFDFF;
            border: 1px solid #A6BFDE;
        }
        .hugeFont{
            font-size: 20px;
            text-align: center;
        }
        .panel-default>.panel-heading {
            color: #333;
            background-color: #fcfcfc;
            border-color: #ddd;
        }
        .midleFont{
            font-size: 15px;
            text-align: center;
            border-radius: 5px;
        }
        .cancel{
            width: 100px;
            height: 30px;
            background-color: rgb(241, 241, 241);
            border: rgb(238, 238, 238) solid 2px;
            border-radius: 5px;
            padding-top: 4px;
            padding-left: 28px;
        }
        .pay{
            width: 100px;
            height: 40px;
            background-color: orange;
            border-radius: 5px;
            color: white;
            font-size: 20px;
            border: orange solid 2px;
            padding-top: 5px;
            padding-left: 13px;
        }
        .hide-div{
            display: none;
        }
        .show-div{
            display: block;
        }
    </style>
    <div class="panel panel-default show-div" style="border: 1px solid #A6BFDE;" id="show-order-div">
<!--        展示数据的div-->
    </div>

    <div class="hide-div" id="nothing-div">
        <div th:replace="components/detail/orderPage :: nothing"></div>
    </div>

    <script>
        function addFunction(){
            //日期格式化
                Date.prototype.format = function(format)
                {
                    var o = {
                        "M+" : this.getMonth()+1, //month
                        "d+" : this.getDate(),    //day
                        "h+" : this.getHours(),   //hour
                        "m+" : this.getMinutes(), //minute
                        "s+" : this.getSeconds(), //second
                        "q+" : Math.floor((this.getMonth()+3)/3),  //quarter
                        "S" : this.getMilliseconds() //millisecond
                    }
                    if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
                        (this.getFullYear()+"").substr(4 - RegExp.$1.length));
                    for(var k in o)if(new RegExp("("+ k +")").test(format))
                        format = format.replace(RegExp.$1,
                            RegExp.$1.length==1 ? o[k] :
                                ("00"+ o[k]).substr((""+ o[k]).length));
                    return format;
                }
            }
        $(function () {
            addFunction();

            let queryType = $('#query-type').val();

            //初入首页,传入的参数是3, 显示未支付的界面
            if(queryType === '3')
                queryType = 'unpaid';
            // 显示改用户所有订单
            $.ajax({
                type:'POST',
                url:'/purchase/displayOrder/'+queryType,
                success:function (data) {
                    let nothingDiv = $('#nothing-div');
                    let orderDiv = $('#show-order-div');

                    if(data.flag){
                        //查询到数据结果就显示
                        nothingDiv.removeClass('show-div');
                        nothingDiv.addClass('hide-div');
                        show(orderDiv, data.resultList);
                        orderDiv.removeClass('hide-div');
                        orderDiv.addClass('show-div');
                    }else {
                        //如果没有查询到结果
                        orderDiv.removeClass('show-div');
                        orderDiv.addClass('hide-div');
                        nothingDiv.removeClass('hide-div');
                        nothingDiv.addClass('show-div');
                    }
                }
            })
        });

        function show(orderDiv, list) {
            let html = "<div class=\"panel-body\" style=\"background-color: rgb(245, 245, 245);\">\n" +
                "            <div class=\"col-md-2 midleFont\"> 列车信息 </div>\n" +
                "            <div class=\"col-md-2 midleFont\"> 乘客信息 </div>\n" +
                "            <div class=\"col-md-2 midleFont\"> 座位信息 </div>\n" +
                "            <div class=\"col-md-2 midleFont\"> 价格 </div>\n" +
                "            <div class=\"col-md-2 midleFont\"> 订单状态 </div>\n" +
                "        </div>";
            html+=showTicket(list);
            orderDiv.html(html);
        }

        function showTicket(list) {
            let html = "";
            let len = list.length;
            for(let i = len - 1; i > -1; i--){
                let ticket = list[i];
                let payStatus = "";
                let btn = "";
                let s = ticket.paidStatus;
                //根据支付状态, 选择展示的颜色
                if(s === 2){
                    //已支付
                    //状态为绿色已支付
                    payStatus = "                <div class=\"col-md-2\">\n" +
                        "                    <div class=\"hugeFont midle\" style='color: green'>已支付</div>\n" +
                        "                </div>\n";

                    btn = "                <div class=\"col-md-2\" style=\"margin-top: 30px;\">\n" +
                        "                    <a href=\"/refund/ticket/"+ ticket.orderId +"\" style='text-decoration: none'>" +
                        "                       <div class=\"cancel\" style='margin-top: 10px;height: 40px;width: 100px;font-size: 20px' >退款</div>" +
                        "                   </a>\n" +
                        "                </div>\n";
                }else if (s === 1) {
                    //还没有支付
                    payStatus = "                <div class=\"col-md-2\">\n" +
                        "                    <div class=\"hugeFont midle\" style=\"color: orangered;\">未支付</div>\n" +
                        "                </div>\n";

                    btn = "                <div class=\"col-md-2\" style=\"margin-top: 30px;\">\n" +
                        "<a href=\"/refund/cancel/"+ticket.orderId+"\" style=\"text-decoration: none;\"><div class=\"cancel\" style=\"padding-left: 20px;\">取消订单</div></a>" +
                        "                    <div class=\"pay\" style=\"margin-top: 10px;height: 40px;width: 100px;\">" +
                        "<a href=\"/purchase/pay/"+ticket.orderId+"\" class=\"pay\" style=\"text-decoration: none\">支付</a>" +
                        "</div>\n" +
                        "                </div>\n";
                }else if (s === 0) {
                    //已经退款
                    payStatus = "                <div class=\"col-md-2\">\n" +
                        "                    <div class=\"hugeFont midle\" style=\"color: gray;\">已退款</div>\n" +
                        "                </div>\n";
                    btn = "";
                }else if (s === 3){
                    //已过期
                    payStatus = "                <div class=\"col-md-2\">\n" +
                        "                    <div class=\"hugeFont midle\" style=\"color: gray;\">已完成</div>\n" +
                        "                </div>\n";
                };
                let date = new Date(ticket.purchaseTime);
                date = date.format('yyyy-MM-dd');
                html+="<div class=\"eachTicket\">\n" +
                    "            <div class=\"panel-body lightBlue\">\n" +
                    "                <div class=\"col-md-4\">\n" +
                    "                    预定日期: <span>"+date+"</span>\n" +
                    "                </div>\n" +
                    "                <div class=\"col-md-4\">\n" +
                    "                    订单编号:<span>"+ticket.orderId+"</span>\n" +
                    "                </div>\n" +
                    "            </div>\n" +
                    "            <br/>\n" +
                    "            <div class=\"panel-body\">\n" +
                    "                <div class=\"col-md-2\">\n" +
                    "                    <div class=\"hugeFont\" th:text=\"ticket\">"+ticket.fromStation+"</div>\n" +
                    "                    <span class=\"glyphicon glyphicon-arrow-down\" style=\"font-size: 20px;color: orange; padding-left: 39px;\"></span>\n" +
                    "                    <div class=\"hugeFont\">"+ticket.toStation+"</div>\n" +
                    "                    <div style=\"margin-top: 10px;\">出发时间:</div>\n" +
                    "                    <div class=\"midleFont\">"+ticket.date+" "+ticket.departureTime+"</div>\n" +
                    "                </div>\n" +
                    "                <style>\n" +
                    "                    .midle{\n" +
                    "                        padding-top: 50px;\n" +
                    "                    }\n" +
                    "                </style>\n" +
                    "                <div class=\"col-md-2\">\n" +
                    "                    <div style=\"padding-top: 50px;\">\n" +
                    "                        手机尾号:\n" +
                    "                        <div class=\"hugeFont\">\n" +
                    "                            "+ticket.phone+"\n" +
                    "                        </div>\n" +
                    "                    </div>\n" +
                    "                </div>\n" +
                    "                <div class=\"col-md-2\">\n" +
                    "                    <div class=\"midle\">\n" +
                    "                        <div>"+ticket.seatType+"</div>\n" +
                    "                        <div>座号: <span class=\"hugeFont\">"+ticket.seatNo+"</span></div>\n" +
                    "                    </div>\n" +
                    "                </div>\n" +
                    "                <div class=\"col-md-2 hugeFont midle\" style=\"color: orange;\">\n" +
                    "                    ￥"+ticket.price+"\n" +
                    "                </div>\n" +
                    payStatus +
                    btn +
                    "            </div>\n" +
                    "            <br/>\n" +
                    "        </div>" +
                    "<hr/>";
            }
            return html;
        }
    </script>
</div>


<!-- 没有订单的情况 -->
<div th:fragment="nothing">
    <div class="panel panel-default" style="border: 1px solid #A6BFDE;">
        <style>
            .order-empty{
                color: #333;
                -webkit-text-size-adjust: 100%;
                font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
                font-size: 14px;
                line-height: 1.5;
                box-sizing: border-box;
                padding: 0;
                margin: 140px auto;
                padding-left: 280px;
            }
            .empty-pic{
                color: #333;
                -webkit-text-size-adjust: 100%;
                font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
                font-size: 14px;
                line-height: 1.5;
                box-sizing: border-box;
                margin: 0;
                padding: 0;
                float: left;
            }
            .empty-txt{
                -webkit-text-size-adjust: 100%;
                font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
                font-size: 14px;
                line-height: 1.5;
                box-sizing: border-box;
                margin: 0;
                margin-left: 110px;
                padding: 15px 0;
                color: #999;
            }
        </style>
        <div class="order-empty">
            <div class="empty-pic"><img th:src="@{/img/empty_01.png}" alt="无法加载图片" src="/img/empty_01.png"></div>
            <div class="empty-txt">
                <p>您没有相应的订单哦～</p>
                <p>您可以通过<a href="http://47.103.125.53/ticket" class="txt-primary underline">车票预订</a>功能，来制定出行计划。</p>
            </div>
        </div>
    </div>
</div>

</body>
</html>